<!DOCTYPE HTML>
{% load i18n static main_tag %}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>{% block title %}{{ order_info.order_code }}-Quotation{% endblock %}</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="{% static 'main/favicon.ico' %}">
    <meta name="keywords" content="">
    <style type="text/css">
        html {
            width: 100%;
        }

        body {
            font-family: 'Open Sans', sans-serif;
            font-size: 13px;
            width: 100%;
            text-align: left;
        }

        td.logo {
          width: 140px;
        }

        .page {
            width: 660px;
            margin-top: 0;
            margin-bottom: 0;
            margin-right: auto;
            margin-left: auto;
            background-color: #ffffff;
            padding-top: 30px;
            padding-bottom: 30px;
            padding-right: 40px;
            padding-left: 40px;
        }

        .container {
            width: 100%;
        }

        h2 {
            text-align: center;
            font-size: 30px;
        }

        th {
            font-size: 14.5px;
        }

        table, tr, th, td {
            padding: 0;
            margin: 0;
        }

        table {
            width: 100%;
            border-collapse:collapse;
            /* background-color: #b6306e; */
            /* width: 660px; */
        }

        table.list_container tr.list_container {
            border: solid black;
            border-top-width:1px;
            border-right-width:0px;
            border-bottom-width:1px;
            border-left-width:0px;
        }

        table.equipment_list tbody tr.list_header th, table.equipment_list_contract tbody tr.list_header th{
            background-color: #63B8FF;
            text-align: center;
        }

        table.equipment_list_contract th, table.equipment_list_contract td {
            border: solid black;
            border-top-width:1px;
            border-right-width:1px;
            border-bottom-width:1px;
            border-left-width:1px;
            padding: 5px;
        }

        table.equipment_list td, table.equipment_list th, table.other_cost th, table.other_cost td {
            border: solid black;
            border-top-width:0px;
            border-right-width:1px;
            border-bottom-width:0px;
            border-left-width:1px;
            padding: 5px;
        }

        table.equipment_list tr.equipment_list_title {
          border: solid black;
          border-top-width:0px;
          border-right-width:0px;
          border-bottom-width:1px;
          border-left-width:0px;
        }

        table.other_cost tbody tr {
            border: solid black;
            border-top-width:1px;
            border-right-width:0px;
            border-bottom-width:1px;
            border-left-width:0px;
        }

        table.summary th, table.summary td {
            border: solid black;
            border-top-width:1px;
            border-right-width:1px;
            border-bottom-width:1px;
            border-left-width:1px;
            padding: 5px;
        }

        table.summary thead th {
            text-align: center;
        }

        table.main_header tr td.header_right {
            text-align: right;
        }

        table.main_footer td {
            text-align: center;
        }

        table.total_cost td, table.total_cost th {
            /* border: solid black; */
            border-top-width:1px;
            border-right-width:1px;
            border-bottom-width:1px;
            border-left-width:1px;
            padding: 5px;
        }

        table.notes td, table.client td, table.client th {
            padding: 5px;
        }

    </style>{% if request.GET.v == 'page' %}
    <link href="{% static 'main/css/main.css' %}" rel="stylesheet">{% else %}
    <link href="{% static 'main/css/main-pdf.css' %}" rel="stylesheet">{% endif %}
</head>
<body>
<div class="main-content">
    <div class="page">
        <div class="container">
            {% block page_header %}{% include 'main/page_header_quotation.html' %}{% endblock %}
            <h2 style="text-align:center;">Quotation</h2>
            <table style="text-align:center;width:660px;">
                <tbody>
                    <tr>
                        <th style="width:70px;">Client:</th>
                        <td>{{ order_info.client.company }}</td>
                        <th style="width:70px;">Contact:</th>
                        <td style="width:220px;">{{ order_info.client.name }}</td>
                    </tr>
                    <tr>
                        <th style="width:80px;">Address:</th>
                        <td rowspan="2" valign="top">{{ order_info.client.company_address }}</td>
                        <th style="width:70px;">Mobile:</th>
                        <td style="width:200px;">{{ order_info.client.mobile }}</td>
                    </tr>
                    <tr>
                        <td></td>
                        {% if order_info.client.email %}<th style="width:70px;">E-mail:</th>
                        <td style="width:200px;">{{ order_info.client.email }}</td>{% else %}
                        <td></td>
                        <td style="width:200px;"></td>{% endif %}
                    </tr>
                </tbody>
            </table>
            <div class="row" style="height:20px;"></div>
            <table style="text-align:center;width:660px;">
                <tbody>
                    <tr>
                        <th style="text-align:right;color:blue">Current: {{ order_info.price_unit }}</th>
                    </tr>
                </tbody>
            </table>
            <table>
                <thead>
                    <tr bgcolor="#63B8FF">
                        <th>No.</th>
                        <th>Description</th>
                        <th>Unit Price</th>
                        <th>Qty</th>
                        <th>Total Price</th>
                    </tr>
                </thead>
                <tbody>{% for item in item_list %}
                    <tr>
                        <td style="text-align:center;width:30px;">{{ forloop.counter }}</td>
                        <td>{{ item.equipment.equipment_code }} / {{ item.equipment.equipment_en }}</td>
                        <td style="text-align:right;width:90px;">{% if item.item_total_discount %}<span style="text-decoration:line-through;">{{ item.item_basic_price_auto|floatformat:'2' }}</span> {% else %}{{ item.item_basic_price_auto|floatformat:'2' }}{% endif %}</td>
                        <td style="text-align:center;width:60px;">{{ item.amount }}</td>
                        <td style="text-align:right;width:90px;">{% if item.item_total_discount %}<span style="text-decoration:line-through;">{{ item.item_total_price_auto|floatformat:'2' }}</span>{% else %}{{ item.item_total_price_auto|floatformat:'2' }}{% endif %}</td>
                    </tr>{% if item.item_total_discount %}
                    <tr>
                        <td></td>
                        <td><font size="2">
                        </font></td>
                        <td style="text-align:right;" valign="top">{{ item.item_price_each_auto|floatformat:'2' }}</td>
                        <td></td>
                        <td style="text-align:right;" valign="top">{{ item.item_final_price_auto|floatformat:'2' }}</td>
                    </tr>{% endif %}
                    <tr>
                        <td></td>
                        <td><font size="2">
                            {{ item.equipment.equipment_para_en|safe|linebreaks }}
                            {% if item.equipment_notes %}{{ item.equipment_notes|linebreaks }}{% endif %}
                        </font></td>
                        <td colspan="3" valign="top" style="text-align:right;">
                            {% if item.equipment.equipment_img %}
                            <img src="{{ item.equipment.equipment_img|qiniu }}" width="240" alt="{{ item.equipment.equipment_en }}" />
                            {% endif %}
                        </td>
                    </tr>{% endfor %}
                </tbody>
            </table>
            <h2 style="text-align:center;">Other Cost</h2>
            <table class="other_cost">
                <tbody>
                    <tr>
                        <td style="text-align:center;width:30px;">1</td>
                        <th>Transport</th>
                        <td style="text-align:right;width:90px;">{{ order_info.transport_cost_auto|default_if_none:"N/A"|floatformat:'2' }}</td>
                        <td style="text-align:center;width:60px;">1</td>
                        <td style="text-align:right;width:90px;">{{ order_info.transport_cost_auto|default_if_none:"N/A" |floatformat:'2'}}</td>
                    </tr>{% if order_info.transport_type %}
                    <tr>
                        <td style="text-align:center;width:30px;"></td>
                        <td>{{ order_info.transport_type.transport_en|linebreaks }}</td>
                        <td style="text-align:right;"></td>
                        <td style="text-align:center;"></td>
                        <td style="text-align:right;"></td>
                    </tr>{% endif %}
                    <tr>
                        <td style="text-align:center;width:30px;">2</td>
                        <th>Installation Services</th>
                        <td style="text-align:right;">{{ order_info.install_cost_auto|default_if_none:"N/A"|floatformat:'2' }}</td>
                        <td style="text-align:center;">1</td>
                        <td style="text-align:right;">{{ order_info.install_cost_auto|default_if_none:"N/A"|floatformat:'2' }}</td>
                    </tr>{% if order_info.installation_desc %}
                    <tr>
                        <td style="text-align:center;width:30px;"></td>
                        <td>{{ order_info.installation_desc.installation_desc_en|linebreaks }}</td>
                        <td style="text-align:right;"></td>
                        <td style="text-align:center;"></td>
                        <td style="text-align:right;"></td>
                    </tr>{% endif %}
                    <tr>
                        <td style="text-align:center;width:30px;">3</td>
                        <th>Cost of Installation Materials</th>
                        <td style="text-align:right;">{{ order_info.material_cost_auto|default_if_none:"N/A"|floatformat:'2' }}</td>
                        <td style="text-align:center;">1</td>
                        <td style="text-align:right;">{{ order_info.material_cost_auto|default_if_none:"N/A"|floatformat:'2' }}</td>
                    </tr>{% if order_info.Installation_materials %}
                    <tr>
                        <td style="text-align:center;width:30px;"></td>
                        <td>{% if order_info.installation_desc %}
                        {{ order_info.Installation_materials.install_m_en|linebreaks }}{% endif %}</td>
                        <td style="text-align:right;"></td>
                        <td style="text-align:center;"></td>
                        <td style="text-align:right;"></td>
                    </tr>{% endif %}
                </tbody>
            </table>
            <h2 style="text-align:center;">Summary</h2>
            <table class="summary">
                <thead>
                    <tr>
                        <th><h4>Payment Terms</h4></th>
                        <th style="width:110px;"><h4>Manufacturing Days</h4></th>
                        <th colspan="2" style="width:240px;"><h3>Summary</h3></th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td style="text-align:center;">{% if order_info.order_pay_method %}{{ order_info.order_pay_method.pay_method_en }}{% endif %}</td>
                        <td style="text-align:center;">{{ order_info.manufacturing_days|default_if_none:"N/A" }} workdays</td>
                        <th style="width:120px;">SubTotal:</th>
                        <th style="text-align:right;">{{ total_price_auto|default_if_none:"N/A"|floatformat:'2' }}</th>
                    </tr>
                </tbody>
            </table>
            <table class="responsive-table" style="text-align:center;width:660px;">
                <tbody>
                    {% if total_discount > 0 %}
                    <tr>
                        <th></th>
                        <th style="width:120px;">Discount:</th>
                        <th style="text-align:right;width:90px;"><font color="red">-{{ total_discount_auto|floatformat:'2' }}</font></th>
                    </tr>{% endif %}{% if extra_discount > 0 %}
                    <tr>
                        <th></th>
                        <th style="width:120px;">Extra Discount:</th>
                        <th style="text-align:right;width:90px;"><font color="red">-{{ extra_discount_auto|floatformat:'2' }}</font></th>
                    </tr>{% endif %}{% if price_tax > 0 %}
                    <tr>
                        <th></th>
                        <th style="width:120px;">Tax:</th>
                        <th style="text-align:right;width:90px;">+{{ price_tax_auto|floatformat:'2' }}</th>
                    </tr>{% endif %}
                    <tr>
                        <th></th>
                        <th style="width:120px;">Final Balance:</th>
                        <th style="text-align:right;width:90px;">{{ price_with_tax_auto|floatformat:'2' }}</th>
                    </tr>
                </tbody>
            </table>
            <table style="text-align:center;width:660px;" >
                <tbody>
                    <tr style="height:30px;">
                        <td></td>
                    </tr>
                    <tr style="height:30px;">
                        <th>Remarks:</th>
                    </tr>
                    <tr>
                        <td>{% if order_info.order_notes %}{{ order_info.order_notes.order_note_en|linebreaks }}{% endif %}</td>
                    </tr>
                    <tr style="height:30px;">
                        <td></td>
                    </tr>
                </tbody>
            </table>
            <table style="text-align:center;width:660px;" >
                <tbody>
                    <tr>
                        <td></td>
                        <th style="width:110px;">Contact:</th>
                        <td style="width:5px;"></td>
                        <td style="width:150px;">{{ order_info.salesman.name }}</td>
                    </tr>
                    <tr>
                        <td></td>
                        <th>Mobile:</th>
                        <td></td>
                        <td>{{ order_info.salesman.mobile }}</td>
                    </tr>
                    <tr>
                        <td></td>
                        <th>E-mail:</th>
                        <td></td>
                        <td>{{ order_info.salesman.email }}</td>
                    </tr>
                </tbody>
            </table>
            <div class="row" style="height:40px;"></div>
            <table style="text-align:center;width:660px;" >
                <tbody>
                    <tr>
                        <td style="text-align:center;">COUNTRY OF ORIGIN:P.R.C</td>
                    </tr>
                    <tr>
                        <td style="text-align:center;">WE CERTIFY THAT VALUES AND OTHER SPECIFICATIONS</td>
                    </tr>
                    <tr>
                        <td style="text-align:center;">CONTAINED IN THIS INVOICE ARE TRUE AND CORRECT</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
<div class="footer" style="text-align:center;">
    <p></p>
</div>
</body>
</html>

